<template>
  <div class="container">
    <div class="head-bar" :class="'color--' + order.deliveryStatus">
      <div>{{ statusTitle[order.deliveryStatus] }}</div>
    </div>
    <div class="mar-t-12 main">
      <div class="pad-l-25 pad-r-25 goods-box">
        <div class="flex pad-t-8 pad-b-8 goods-detail" v-for="(good, index) in order.deliveryDetails"  :key="index">
          <div class="mar-r-10">
            <img v-if="good.goodsImageUrl" :src="good.goodsImageUrl" class="width-90 height-90"/>
          </div>
          <div class="flex-item">
            <div class="flex">
              <div class="flex-item">
                <div class="goods-title line-2 mar-b-4">{{good.goodsTitle}}</div>
                <div class="goods-prop font-color-8 line-1 font-10" v-if="good.skuDetail">{{good.skuDetail}}</div>
                <div class="height-20" v-else>{{good.skuDetail}}</div>
                <div class="flex line-h-1 font-12">
                  <div class="font-black">共{{good.goodsNum}}件</div>
                  <div class="mar-l-8 fontcolor-3" :class="'fontcolor--' + order.deliveryStatus" v-if="order.deliveryStatus === 30">已签收{{good.goodsNum}}件</div>
                </div>
              </div>            
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info mar-t-12">
      <div class="font-color-6">配送单号：
        <span class="font-15 font-color">{{order.deliveryNo}}</span>
        <span class="copy-btn mar-l-6" @click="$pt.setClipboardData({data: order.deliveryNo})">复制</span>
      </div>
      <div class="font-color-6">生成时间：
        <span class="font-15 font-color">{{order.createTime}}</span>
      </div>
      <div class="font-color-6">订单状态：
        <span class="font-15" :class="'fontcolor--' + order.deliveryStatus">{{ statusTitle[order.deliveryStatus] }}</span>
      </div>
      <div class="font-color-6" v-if="order.receiveTime">签收时间：
        <span class="font-15 font-color">{{order.receiveTime}}</span>
      </div>
    </div>
    <div class="height-72"></div>
    <div class="btn-box" v-if="order.deliveryStatus === 20 || order.deliveryStatus === 10">
      <button class="confirm-signfor" v-if="order.deliveryStatus === 20" @click="showDialog = true">确认签收</button>
      <button class="contact-customer" @click="$pt.makePhoneCall({phoneNumber: customerPhone})" v-if="order.deliveryStatus === 10">联系客服</button>
    </div>
    <van-dialog
      use-slot
      title="您确定签收吗?"
      :show="showDialog"
      show-cancel-button
      @close="onClose"
      @confirm="submitData"
    >
    </van-dialog>
  </div>
</template>
<script>
import { getCustomerPhone, getDeliveryDetail, updataDeliveryStatus } from '@/api/home'
export default {
  data() {
    return {
      statusTitle: {
        10: '待配送',
        20: '待签收',
        30: '已签收'
      },
      showDialog: false,
      order: {},
      deliveryId: '',
      customerPhone: ''
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.deliveryId = this.getCurrentPage().query.deliveryId
    this.getCustomerPhone()
    this.pageInit()
  },
  methods: {
    pageInit() {
      getDeliveryDetail(this.deliveryId).then(response => {
        if (response.isError) return
        this.order = response.data
        console.log(response.data)
      })
    },
    getCustomerPhone() {
      getCustomerPhone(this.getCustomerId).then(response => {
        if (response.isError) return
        this.customerPhone = response.data
      })
    },
    submitData() {
      // 弹窗确认按钮
      // 确认签收
      updataDeliveryStatus(this.deliveryId).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: '签收成功!' })
        setTimeout(() => {
          this.$pt.navigateTo({url: '/pages/personal/delivery-list/detail/main?deliveryId=' + this.deliveryId})
        }, 1500)
      })
    },
    onClose() {
      // 弹窗取消按钮
      this.showDialog = false
    }
  }
}
</script>
<style lang="less" scoped>
.head-bar{
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 25px;
}
.color--10{
  background: #ff590a;
}
.color--20{
  background: #0eaeff;
}
.color--30{
  background: #04c160;
}
.fontcolor--10{
  color: #ff590a;
}
.fontcolor--20{
  color: #0eaeff;
}
.fontcolor--30{
  color: #04c160;
}
.main{
  background: white;
}
.line-h-1{
  line-height: 1;
}
.goods-box{
  .goods-detail{
    border-bottom: 1px solid #e9e9e9;
    &:last-child{
      border-bottom: unset;
    }
  }
  .goods-prop{
    background: #e7e7e7;
    height: 20px;
    line-height: 20px;
  }
  .goods-title {
    font-size: 14px;
    height: unset;
    line-height: 1.4;
  }
}
.order-info{
  background: white;
  padding: 10px 25px;
}
.copy-btn{
  border-radius: 3px;
  border: 1px solid #dadada;
  padding: 2px 4px;
  font-size: 10px;
  color: #aeaeae;
}
.btn-box{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e0e0e0;
  button{
    height: 40px;
    width: 325px;
    border-radius: 20px;
    line-height: 40px;
    font-size: 15px;
    color: white;
    &::after{
      border: unset;
    }
  }
  .contact-customer{
    background: rgba(51, 51, 51, 1);
  }
  .confirm-signfor{
    background: linear-gradient(to right,#ff9700,#ff4800);
  }
}
</style>
